<template>
  <div id="app" :class="appClasses">
    <!-- 全局加载遮罩 -->
    <div v-if="isLoading" class="global-loading">
      <div class="loading-content">
        <div class="loading-spinner">
          <div class="spinner-ring"></div>
          <div class="spinner-ring"></div>
          <div class="spinner-ring"></div>
        </div>
        <p class="loading-text">{{ loadingText }}</p>
      </div>
    </div>

    <!-- 主应用内容 -->
    <div v-else class="app-container">
      <!-- 侧边栏 -->
      <aside class="sidebar" :class="{ collapsed: sidebarCollapsed }">
        <!-- Logo区域 -->
        <div class="logo-section">
          <div class="logo">
            <img src="/logo.svg" alt="CardcaptorSakura" class="logo-image" />
            <span v-if="!sidebarCollapsed" class="logo-text"
              >CardcaptorSakura</span
            >
          </div>

          <button
            class="sidebar-toggle"
            @click="toggleSidebar"
            :title="sidebarCollapsed ? '展开侧边栏' : '收起侧边栏'"
          >
            <Icon
              :name="sidebarCollapsed ? 'chevron-right' : 'chevron-left'"
              :size="16"
            />
          </button>
        </div>

        <!-- 导航菜单 -->
        <nav class="nav-menu">
          <router-link
            v-for="item in navigationItems"
            :key="item.path"
            :to="item.path"
            class="nav-item"
            :class="{ active: $route.path === item.path }"
            :title="sidebarCollapsed ? item.name : ''"
          >
            <Icon :name="item.icon" :size="20" />
            <span v-if="!sidebarCollapsed" class="nav-text">{{
              item.name
            }}</span>
            <div v-if="item.badge && !sidebarCollapsed" class="nav-badge">
              {{ item.badge }}
            </div>
          </router-link>
        </nav>

        <!-- 底部操作 -->
        <div class="sidebar-footer">
          <!-- 当前人格显示 -->
          <div v-if="!sidebarCollapsed" class="current-persona">
            <div class="persona-avatar">
              <img :src="currentPersona.avatar" :alt="currentPersona.name" />
            </div>
            <div class="persona-info">
              <span class="persona-name">{{ currentPersona.name }}</span>
              <span class="persona-status">{{ currentPersona.status }}</span>
            </div>
            <button class="persona-switch" @click="showPersonaSelector = true">
              <Icon name="chevron-up" :size="16" />
            </button>
          </div>

          <!-- 设置按钮 -->
          <router-link
            to="/settings"
            class="nav-item settings-item"
            :class="{ active: $route.path === '/settings' }"
            :title="sidebarCollapsed ? '设置' : ''"
          >
            <Icon name="settings" :size="20" />
            <span v-if="!sidebarCollapsed" class="nav-text">设置</span>
          </router-link>
        </div>
      </aside>

      <!-- 主内容区域 -->
      <main class="main-content">
        <!-- 顶部栏 -->
        <header class="top-bar">
          <div class="top-bar-left">
            <!-- 面包屑导航 -->
            <nav class="breadcrumb">
              <span
                v-for="(crumb, index) in breadcrumbs"
                :key="index"
                class="breadcrumb-item"
              >
                <router-link
                  v-if="crumb.path"
                  :to="crumb.path"
                  class="breadcrumb-link"
                >
                  {{ crumb.name }}
                </router-link>
                <span v-else class="breadcrumb-text">{{ crumb.name }}</span>
                <Icon
                  v-if="index < breadcrumbs.length - 1"
                  name="chevron-right"
                  :size="14"
                  class="breadcrumb-separator"
                />
              </span>
            </nav>
          </div>

          <div class="top-bar-right">
            <!-- 搜索框 -->
            <div class="search-box">
              <Icon name="search" :size="16" class="search-icon" />
              <input
                v-model="searchQuery"
                type="text"
                placeholder="搜索聊天记录、知识库..."
                class="search-input"
                @keyup.enter="performSearch"
              />
              <button
                v-if="searchQuery"
                class="search-clear"
                @click="clearSearch"
              >
                <Icon name="x" :size="14" />
              </button>
            </div>

            <!-- 通知按钮 -->
            <button
              class="notification-btn"
              @click="showNotifications = !showNotifications"
            >
              <Icon name="bell" :size="20" />
              <span v-if="unreadNotifications > 0" class="notification-badge">{{
                unreadNotifications
              }}</span>
            </button>

            <!-- 用户菜单 -->
            <div class="user-menu" @click="showUserMenu = !showUserMenu">
              <div class="user-avatar">
                <img :src="user.avatar" :alt="user.name" />
              </div>
              <Icon name="chevron-down" :size="14" class="user-menu-icon" />
            </div>
          </div>
        </header>

        <!-- 路由视图 -->
        <div class="router-view-container">
          <router-view v-slot="{ Component, route }">
            <transition :name="getTransitionName(route)" mode="out-in">
              <keep-alive :include="keepAliveComponents">
                <component :is="Component" :key="route.path" />
              </keep-alive>
            </transition>
          </router-view>
        </div>
      </main>
    </div>

    <!-- 人格选择器弹窗 -->
    <PersonaSelector
      v-if="showPersonaSelector"
      @close="showPersonaSelector = false"
      @select="handlePersonaSelect"
    />

    <!-- 通知面板 -->
    <div v-if="showNotifications" class="notification-panel">
      <div class="notification-header">
        <h3>通知</h3>
        <button @click="showNotifications = false">
          <Icon name="x" :size="16" />
        </button>
      </div>

      <div class="notification-list">
        <div
          v-for="notification in notifications"
          :key="notification.id"
          class="notification-item"
          :class="{ unread: !notification.read }"
        >
          <div class="notification-icon">
            <Icon :name="notification.icon" :size="16" />
          </div>
          <div class="notification-content">
            <p class="notification-title">{{ notification.title }}</p>
            <p class="notification-message">{{ notification.message }}</p>
            <span class="notification-time">{{
              formatTime(notification.time)
            }}</span>
          </div>
        </div>

        <div v-if="notifications.length === 0" class="no-notifications">
          <Icon name="bell-off" :size="32" />
          <p>暂无通知</p>
        </div>
      </div>
    </div>

    <!-- 用户菜单下拉 -->
    <div v-if="showUserMenu" class="user-menu-dropdown">
      <div class="user-info">
        <div class="user-avatar-large">
          <img :src="user.avatar" :alt="user.name" />
        </div>
        <div class="user-details">
          <span class="user-name">{{ user.name }}</span>
          <span class="user-email">{{ user.email }}</span>
        </div>
      </div>

      <div class="menu-divider"></div>

      <div class="menu-items">
        <button class="menu-item" @click="editProfile">
          <Icon name="user" :size="16" />
          <span>个人资料</span>
        </button>

        <button class="menu-item" @click="openPreferences">
          <Icon name="settings" :size="16" />
          <span>偏好设置</span>
        </button>

        <button class="menu-item" @click="viewUsage">
          <Icon name="bar-chart" :size="16" />
          <span>使用统计</span>
        </button>

        <div class="menu-divider"></div>

        <button class="menu-item" @click="showHelp">
          <Icon name="help-circle" :size="16" />
          <span>帮助中心</span>
        </button>

        <button class="menu-item" @click="reportIssue">
          <Icon name="flag" :size="16" />
          <span>反馈问题</span>
        </button>

        <div class="menu-divider"></div>

        <button class="menu-item danger" @click="logout">
          <Icon name="log-out" :size="16" />
          <span>退出登录</span>
        </button>
      </div>
    </div>

    <!-- 全局遮罩 -->
    <div
      v-if="showPersonaSelector || showNotifications || showUserMenu"
      class="global-overlay"
      @click="closeAllOverlays"
    ></div>

    <!-- 全局提示 -->
    <div
      v-if="globalMessage"
      class="global-message"
      :class="globalMessage.type"
    >
      <Icon :name="globalMessage.icon" :size="16" />
      <span>{{ globalMessage.text }}</span>
      <button @click="globalMessage = null">
        <Icon name="x" :size="14" />
      </button>
    </div>

    <!-- 全局组件 -->
    <GlobalNotification />
    <GlobalLoading />
    <GlobalModal />
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useThemeStore } from "@/stores/theme";
import { useUserStore } from "@/stores/user";
import { usePersonaStore } from "@/stores/persona";
import { useNotificationStore } from "@/stores/notification";
import GlobalNotification from "@/components/common/GlobalNotification.vue";
import GlobalLoading from "@/components/common/GlobalLoading.vue";
import GlobalModal from "@/components/common/GlobalModal.vue";
import PersonaSelector from "@/components/persona/PersonaSelector.vue";
import Icon from "@/components/common/Icon.vue";

// 接口定义
interface NavigationItem {
  path: string;
  name: string;
  icon: string;
  badge?: number;
}

interface BreadcrumbItem {
  name: string;
  path?: string;
}

interface Notification {
  id: string;
  title: string;
  message: string;
  icon: string;
  time: Date;
  read: boolean;
  type: "info" | "success" | "warning" | "error";
}

interface GlobalMessage {
  text: string;
  type: "success" | "error" | "warning" | "info";
  icon: string;
}

interface User {
  id: string;
  name: string;
  email: string;
  avatar: string;
}

interface Persona {
  id: string;
  name: string;
  avatar: string;
  status: string;
}

// 路由相关
const router = useRouter();
const route = useRoute();

// 状态管理
const themeStore = useThemeStore();
const userStore = useUserStore();
const personaStore = usePersonaStore();
const notificationStore = useNotificationStore();

// 响应式数据
const isLoading = ref(true);
const loadingText = ref("正在加载...");
const sidebarCollapsed = ref(false);
const showPersonaSelector = ref(false);
const showNotifications = ref(false);
const showUserMenu = ref(false);
const searchQuery = ref("");
const globalMessage = ref<GlobalMessage | null>(null);
const keepAliveComponents = ref(["Home", "Chat", "Knowledge"]);

// 导航菜单项
const navigationItems = ref<NavigationItem[]>([
  {
    path: "/",
    name: "首页",
    icon: "home",
  },
  {
    path: "/chat",
    name: "对话",
    icon: "message-circle",
    badge: 3,
  },
  {
    path: "/knowledge",
    name: "知识库",
    icon: "book-open",
  },
  {
    path: "/persona",
    name: "人格管理",
    icon: "users",
  },
]);

// 计算属性
const appClasses = computed(() => ({
  app: true,
  [`theme-${themeStore.currentTheme}`]: true,
  mobile: themeStore.isMobile,
  "sidebar-collapsed": sidebarCollapsed.value,
  loading: isLoading.value,
}));

const breadcrumbs = computed<BreadcrumbItem[]>(() => {
  const routePath = route.path;
  const breadcrumbs: BreadcrumbItem[] = [];

  if (routePath === "/") {
    breadcrumbs.push({ name: "首页" });
  } else if (routePath.startsWith("/chat")) {
    breadcrumbs.push({ name: "首页", path: "/" });
    breadcrumbs.push({ name: "对话" });
  } else if (routePath.startsWith("/knowledge")) {
    breadcrumbs.push({ name: "首页", path: "/" });
    breadcrumbs.push({ name: "知识库" });
  } else if (routePath.startsWith("/persona")) {
    breadcrumbs.push({ name: "首页", path: "/" });
    breadcrumbs.push({ name: "人格管理" });
  } else if (routePath.startsWith("/settings")) {
    breadcrumbs.push({ name: "首页", path: "/" });
    breadcrumbs.push({ name: "设置" });
  }

  return breadcrumbs;
});

const currentPersona = computed<Persona>(() => {
  return (
    personaStore.currentPersona || {
      id: "default",
      name: "小樱",
      avatar: "/avatars/sakura.png",
      status: "在线",
    }
  );
});

const user = computed<User>(() => {
  return (
    userStore.currentUser || {
      id: "user1",
      name: "用户",
      email: "user@example.com",
      avatar: "/avatars/default-user.png",
    }
  );
});

const notifications = computed<Notification[]>(() => {
  return notificationStore.notifications || [];
});

const unreadNotifications = computed(() => {
  return notifications.value.filter((n) => !n.read).length;
});

// 监听路由变化
watch(
  () => route.path,
  (newPath) => {
    // 关闭所有弹出层
    closeAllOverlays();

    // 更新导航项的徽章
    updateNavigationBadges();
  },
);

// 监听侧边栏状态
watch(sidebarCollapsed, (collapsed) => {
  // 保存到本地存储
  localStorage.setItem("sidebar-collapsed", collapsed.toString());
});

// 生命周期
onMounted(async () => {
  await initializeApp();
});

// 方法
const initializeApp = async () => {
  try {
    loadingText.value = "正在初始化...";

    // 初始化用户信息
    await userStore.initializeUser();
    loadingText.value = "正在加载用户数据...";

    // 初始化主题
    themeStore.initializeTheme();
    loadingText.value = "正在应用主题...";

    // 初始化人格
    await personaStore.initializePersonas();
    loadingText.value = "正在加载人格数据...";

    // 初始化通知
    await notificationStore.initializeNotifications();
    loadingText.value = "正在加载通知...";

    // 恢复侧边栏状态
    const savedCollapsed = localStorage.getItem("sidebar-collapsed");
    if (savedCollapsed !== null) {
      sidebarCollapsed.value = savedCollapsed === "true";
    }

    // 延迟隐藏加载界面
    await new Promise((resolve) => setTimeout(resolve, 500));
    isLoading.value = false;

    // 应用初始化完成
  } catch (error) {
    // 应用初始化失败
    showGlobalMessage("应用初始化失败，请刷新页面重试", "error");
    isLoading.value = false;
  }
};

const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value;
};

const getTransitionName = (route: any) => {
  return route.meta?.transition || "fade";
};

const performSearch = () => {
  if (!searchQuery.value.trim()) return;

  // 执行搜索逻辑
  // 搜索: searchQuery.value

  // 根据搜索内容跳转到相应页面
  if (
    searchQuery.value.includes("聊天") ||
    searchQuery.value.includes("对话")
  ) {
    router.push("/chat");
  } else if (
    searchQuery.value.includes("知识") ||
    searchQuery.value.includes("文档")
  ) {
    router.push("/knowledge");
  }
};

const clearSearch = () => {
  searchQuery.value = "";
};

const handlePersonaSelect = (persona: Persona) => {
  personaStore.setCurrentPersona(persona);
  showPersonaSelector.value = false;
  showGlobalMessage(`已切换到人格：${persona.name}`, "success");
};

const closeAllOverlays = () => {
  showPersonaSelector.value = false;
  showNotifications.value = false;
  showUserMenu.value = false;
};

const updateNavigationBadges = () => {
  // 更新导航项的徽章数量
  const chatItem = navigationItems.value.find((item) => item.path === "/chat");
  if (chatItem) {
    // 这里可以从store获取未读消息数量
    chatItem.badge = 3; // 示例数据
  }
};

const formatTime = (time: Date) => {
  const now = new Date();
  const diff = now.getTime() - time.getTime();
  const minutes = Math.floor(diff / 60000);
  const hours = Math.floor(diff / 3600000);
  const days = Math.floor(diff / 86400000);

  if (minutes < 1) return "刚刚";
  if (minutes < 60) return `${minutes}分钟前`;
  if (hours < 24) return `${hours}小时前`;
  if (days < 7) return `${days}天前`;

  return time.toLocaleDateString();
};

const showGlobalMessage = (
  text: string,
  type: "success" | "error" | "warning" | "info",
) => {
  const iconMap = {
    success: "check-circle",
    error: "x-circle",
    warning: "alert-triangle",
    info: "info",
  };

  globalMessage.value = {
    text,
    type,
    icon: iconMap[type],
  };

  // 3秒后自动隐藏
  setTimeout(() => {
    globalMessage.value = null;
  }, 3000);
};

// 用户菜单操作
const editProfile = () => {
  showUserMenu.value = false;
  router.push("/settings/profile");
};

const openPreferences = () => {
  showUserMenu.value = false;
  router.push("/settings/preferences");
};

const viewUsage = () => {
  showUserMenu.value = false;
  router.push("/settings/usage");
};

const showHelp = () => {
  showUserMenu.value = false;
  window.open("/help", "_blank");
};

const reportIssue = () => {
  showUserMenu.value = false;
  window.open("/feedback", "_blank");
};

const logout = async () => {
  showUserMenu.value = false;

  try {
    await userStore.logout();
    router.push("/login");
    showGlobalMessage("已成功退出登录", "success");
  } catch (error) {
    // 退出登录失败
    showGlobalMessage("退出登录失败", "error");
  }
};
</script>

<style scoped>
/* 全局样式 */
.app {
  min-height: 100vh;
  background: var(--bg-color);
  color: var(--text-color);
  font-family: var(--font-family);
  transition: all 0.3s ease;
  overflow: hidden;
}

/* 全局加载 */
.global-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loading-content {
  text-align: center;
}

.loading-spinner {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
}

.spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top: 3px solid var(--primary-color);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.spinner-ring:nth-child(2) {
  animation-delay: 0.1s;
  border-top-color: var(--secondary-color);
}

.spinner-ring:nth-child(3) {
  animation-delay: 0.2s;
  border-top-color: var(--accent-color);
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  color: var(--text-secondary);
  font-size: 14px;
  margin: 0;
}

/* 应用容器 */
.app-container {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* 侧边栏 */
.sidebar {
  width: 280px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
  z-index: 100;
}

.sidebar.collapsed {
  width: 64px;
}

.logo-section {
  padding: 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-image {
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.logo-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
}

.sidebar-toggle {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--bg-secondary);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-toggle:hover {
  background: var(--bg-hover);
}

.nav-menu {
  flex: 1;
  padding: 20px 16px;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 4px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  position: relative;
}

.nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.nav-item.active {
  background: var(--primary-color-light);
  color: var(--primary-color);
}

.nav-text {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
}

.nav-badge {
  background: var(--error-color);
  color: white;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  margin-left: auto;
}

.sidebar-footer {
  padding: 16px;
  border-top: 1px solid var(--border-color);
}

.current-persona {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.current-persona:hover {
  background: var(--bg-hover);
}

.persona-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
}

.persona-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.persona-info {
  flex: 1;
  min-width: 0;
}

.persona-name {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.persona-status {
  display: block;
  font-size: 12px;
  color: var(--success-color);
  margin-top: 2px;
}

.persona-switch {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.persona-switch:hover {
  background: var(--bg-hover);
}

.settings-item {
  margin-top: 8px;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 顶部栏 */
.top-bar {
  height: 64px;
  background: var(--bg-color);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  z-index: 50;
}

.top-bar-left {
  display: flex;
  align-items: center;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumb-link {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s ease;
}

.breadcrumb-link:hover {
  color: var(--primary-color);
}

.breadcrumb-text {
  color: var(--text-primary);
  font-size: 14px;
  font-weight: 500;
}

.breadcrumb-separator {
  color: var(--text-tertiary);
}

.top-bar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 搜索框 */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-icon {
  position: absolute;
  left: 12px;
  color: var(--text-tertiary);
  z-index: 1;
}

.search-input {
  width: 300px;
  height: 36px;
  padding: 0 36px 0 36px;
  border: 1px solid var(--border-color);
  border-radius: 18px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 14px;
  transition: all 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: var(--primary-color);
  background: var(--bg-color);
}

.search-input::placeholder {
  color: var(--text-tertiary);
}

.search-clear {
  position: absolute;
  right: 12px;
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-tertiary);
  transition: all 0.2s ease;
}

.search-clear:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

/* 通知按钮 */
.notification-btn {
  position: relative;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}

.notification-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.notification-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--error-color);
  color: white;
  font-size: 10px;
  padding: 2px 4px;
  border-radius: 8px;
  min-width: 16px;
  text-align: center;
  line-height: 1;
}

/* 用户菜单 */
.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.user-menu:hover {
  background: var(--bg-hover);
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
}

.user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-menu-icon {
  color: var(--text-tertiary);
  transition: transform 0.2s ease;
}

.user-menu:hover .user-menu-icon {
  transform: rotate(180deg);
}

/* 路由视图容器 */
.router-view-container {
  flex: 1;
  overflow: hidden;
  position: relative;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.slide-left-enter-active,
.slide-left-leave-active {
  transition: transform 0.3s ease;
}

.slide-left-enter-from {
  transform: translateX(100%);
}

.slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter-active,
.slide-right-leave-active {
  transition: transform 0.3s ease;
}

.slide-right-enter-from {
  transform: translateX(-100%);
}

.slide-right-leave-to {
  transform: translateX(100%);
}

.scale-enter-active,
.scale-leave-active {
  transition: all 0.3s ease;
}

.scale-enter-from,
.scale-leave-to {
  transform: scale(0.95);
  opacity: 0;
}

/* 通知面板 */
.notification-panel {
  position: fixed;
  top: 64px;
  right: 24px;
  width: 360px;
  max-height: 480px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  overflow: hidden;
}

.notification-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notification-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.notification-header button {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-tertiary);
  transition: all 0.2s ease;
}

.notification-header button:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.notification-list {
  max-height: 400px;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s ease;
}

.notification-item:hover {
  background: var(--bg-secondary);
}

.notification-item.unread {
  background: var(--primary-color-light);
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  flex-shrink: 0;
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.notification-title {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}

.notification-message {
  margin: 0 0 8px 0;
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.notification-time {
  font-size: 12px;
  color: var(--text-tertiary);
}

.no-notifications {
  padding: 40px 20px;
  text-align: center;
  color: var(--text-tertiary);
}

.no-notifications p {
  margin: 12px 0 0 0;
  font-size: 14px;
}

/* 用户菜单下拉 */
.user-menu-dropdown {
  position: fixed;
  top: 64px;
  right: 24px;
  width: 240px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  overflow: hidden;
}

.user-info {
  padding: 20px;
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
}

.user-avatar-large {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.user-avatar-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.user-details {
  flex: 1;
  min-width: 0;
}

.user-name {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.user-email {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
}

.menu-divider {
  height: 1px;
  background: var(--border-color);
  margin: 8px 0;
}

.menu-items {
  padding: 8px 0;
}

.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
}

.menu-item:hover {
  background: var(--bg-hover);
}

.menu-item.danger {
  color: var(--error-color);
}

.menu-item.danger:hover {
  background: var(--error-color-light);
}

/* 全局遮罩 */
.global-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  backdrop-filter: blur(4px);
}

/* 全局提示 */
.global-message {
  position: fixed;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  z-index: 2000;
  max-width: 400px;
  animation: slideInRight 0.3s ease;
}

.global-message.success {
  border-color: var(--success-color);
  background: var(--success-color-light);
  color: var(--success-color);
}

.global-message.error {
  border-color: var(--error-color);
  background: var(--error-color-light);
  color: var(--error-color);
}

.global-message.warning {
  border-color: var(--warning-color);
  background: var(--warning-color-light);
  color: var(--warning-color);
}

.global-message.info {
  border-color: var(--info-color);
  background: var(--info-color-light);
  color: var(--info-color);
}

.global-message button {
  width: 20px;
  height: 20px;
  border: none;
  background: transparent;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: currentColor;
  opacity: 0.7;
  transition: all 0.2s ease;
}

.global-message button:hover {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1);
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .search-input {
    width: 240px;
  }

  .notification-panel,
  .user-menu-dropdown {
    right: 16px;
  }
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .sidebar:not(.collapsed) {
    transform: translateX(0);
  }

  .main-content {
    width: 100%;
  }

  .top-bar {
    padding: 0 16px;
  }

  .search-box {
    display: none;
  }

  .notification-panel,
  .user-menu-dropdown {
    right: 8px;
    left: 8px;
    width: auto;
  }

  .global-message {
    right: 16px;
    left: 16px;
    max-width: none;
  }
}

@media (max-width: 480px) {
  .top-bar {
    padding: 0 12px;
  }

  .top-bar-right {
    gap: 8px;
  }

  .breadcrumb {
    display: none;
  }
}
</style>
